<template>
<div :class="[$style.container]">
  <div class="mr-2">
    <!-- <el-button type="text" icon="el-icon-d-arrow-left" size="small" @click="updateLeftExpand(false)" v-if="leftExpand"></el-button>
    <el-button type="text" icon="el-icon-d-arrow-right" size="small" @click="updateLeftExpand(true)" v-else></el-button> -->
  </div>
  <div :class="[$style.breadcrumb]">
    <div v-if="!none">
      <el-checkbox :indeterminate="!all && !none" v-model="all"></el-checkbox>
      <span class="ml-2">已选中 {{checkedNum}} 项</span>
    </div>
    <div v-else>
      <doc-path :data="current"></doc-path>
    </div>
  </div>
  <div :class="[$style.search]">
    <el-input v-model="keyword" placeholder="输入文档名称或标签搜索" prefix-icon="el-icon-search" size="small" @change="onSearch"></el-input>
  </div>
  <div :class="[$style.actions]" v-if="current">
    <span v-if="none">
      <el-dropdown trigger="click" v-if="hasPerm('create')">
        <el-link :underline="false" type="primary" class="mx-2"><i class="el-icon-document-add"></i><span>新建</span></el-link>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="createDoc(row)" v-for="(row, i) in newData" :key="i">
            <svg-icon :icon="row.icon" />
            <span class="ml-2">{{row.text}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click" v-if="hasPerm('upload')">
        <el-link :underline="false" type="primary" class="mx-2"><i class="el-icon-upload"></i><span>上传</span></el-link>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="onUpload({ multiple: true })"><svg-icon icon="file" /><span class="ml-2">文件</span></el-dropdown-item>
          <el-dropdown-item @click.native="onUpload({ directory: true, webkitdirectory: true })"><svg-icon icon="docs" /><span class="ml-2">文件夹</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
    <span v-else>
      <el-link :underline="false" type="primary" @click="cpDoc()" v-if="hasPerm('copy', checkedRows)"><i class="el-icon-copy-document"></i><span>复制</span></el-link>
      <el-link :underline="false" type="primary" class="ml-3" @click="mvDoc()" v-if="canMove"><i class="el-icon-rank"></i><span>移动</span></el-link>
      <el-link :underline="false" type="primary" class="ml-3" @click="downloadDoc()" v-if="hasPerm('download', checkedRows)"><i class="el-icon-download"></i><span>下载</span></el-link>
      <el-link :underline="false" type="primary" class="ml-3" @click="delDoc()" v-if="canDelete"><i class="el-icon-delete"></i><span>删除</span></el-link>
    </span>

    <span v-if="none">
      <el-divider direction="vertical"></el-divider>
      <el-dropdown trigger="click">
        <el-link :underline="false" :type="sortedIndex > 0 ? 'primary' : '' " class="ml-2"><i class="el-icon-sort"></i></el-link>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :class="[sortSelectedCls(row, i)]" :divided="row.divided" @click.native="onSort(row)" v-for="(row, i) in sortData" :key="i">
            <span class="mx-3">{{row.label}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click">
        <el-link :underline="false" :type="filteredIndex > 0 ? 'primary' : '' " class="ml-3"><svg-icon icon="filter"></svg-icon></el-link>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :class="[filterSelectedCls(row, i)]" @click.native="filterDoc(row.name, row.value)" v-for="(row, i) in filterData" :key="i">
            <span class="mx-3">
              <svg-icon :icon="row.icon" />
              <span class="ml-2">{{row.label}}</span>
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click">
        <el-link :underline="false" class="ml-3"><i class="el-icon-menu"></i></el-link>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :class="[listSelectedCls(row, i)]" :divided="row.divided" @click.native="onList(row)" v-for="(row, i) in listData" :key="i">
            <span class="mx-3">{{row.label}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
  </div>
  <div class="mx-3">
    <el-button type="text" icon="el-icon-d-arrow-right" size="small" @click="updateRightExpand(false)" v-if="rightExpand"></el-button>
    <el-button type="text" icon="el-icon-d-arrow-left" size="small" @click="updateRightExpand(true)" v-else></el-button>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Emit, Inject, Ref } from 'vue-property-decorator'
import { PageData } from '@/config/page'
import { hasPerm, PermissionName } from '@/config/acl'
import { getSuffixesByType } from '@/config/content-type'
import DocPath from '../doc-path/index.vue'

@Component({
  components: { DocPath }
})
export default class DocNav extends Vue {
  @Prop(Boolean) leftExpand!: boolean

  @Prop(Boolean) rightExpand!: boolean

  @Prop() data!: PageData<any>

  @Prop() current!: any

  @Inject() getPageData!: () => PageData<any>

  @Inject() createDoc!: (params: { label: string; type: string }) => void

  @Inject() uploadDoc!: (params: any) => void

  @Inject() sortDoc!: (prop: string, order: 'asc' | 'desc') => void

  @Inject() filterDoc!: (name: string, value: any) => void

  @Inject() listDoc!: (name: string) => void

  @Inject() downloadDoc!: (row?: any) => void

  @Inject() delDoc!: (row?: any) => void

  @Inject() mvDoc!: (row?: any) => void

  @Inject() cpDoc!: (row?: any) => void

  keyword = ''

  sorter: any = this.$storage.get('doc_query_sorter') || null

  list: any = this.$storage.get('doc_query_list') || 'list'

  newData = [
    { type: 'word', label: 'Word', text: '新建Word', name: '新建文档', suffix: '.docx', icon: 'word' },
    { type: 'excel', label: 'Excel', text: '新建Excel', name: '新建表格', suffix: '.xlsx', icon: 'excel' },
    { type: 'ppt', label: 'PPT', text: '新建PPT', name: '新建演示', suffix: '.ppt', icon: 'ppt' },
    { type: 'dir', label: '文件夹', text: '新建文件夹', icon: 'docs' }
  ]

  sortData = [
    { prop: '', order: '', label: '默认排序', divided: false },
    { prop: 'modifiedTime', order: 'desc', label: '新文档优先', divided: false },
    { prop: 'modifiedTime', order: 'asc', label: '旧文档优先', divided: false },
    { prop: 'name', order: 'asc', label: '文档名A-Z', divided: true },
    { prop: 'name', order: 'desc', label: '文档名Z-A', divided: false },
    { prop: 'size', order: 'desc', label: '大文件优先', divided: true },
    { prop: 'size', order: 'asc', label: '小文件优先', divided: false },
    { prop: 'type', order: 'asc', label: '文件夹优先', divided: true },
    { prop: 'type', order: 'desc', label: '文件优先', divided: false }
  ]

  filterData = [
    { name: '', value: '', label: '全部', icon: 'file' },
    { name: 'contentType', value: getSuffixesByType('office').join(','), label: 'office文档', icon: 'word' },
    { name: 'contentType', value: getSuffixesByType('pdf').join(','), label: 'PDF', icon: 'pdf' },
    { name: 'contentType', value: getSuffixesByType('image').join(','), label: '图片', icon: 'image' },
    { name: 'contentType', value: getSuffixesByType('video').join(','), label: '视频', icon: 'video' },
    { name: 'contentType', value: getSuffixesByType('audio').join(','), label: '音频', icon: 'audio' },
    { name: 'contentType', value: getSuffixesByType('text').join(','), label: '文本', icon: 'text' },
    { name: 'type', value: 'dir', label: '文件夹', icon: 'docs' }
  ]

  listData = [
    { name: 'list', label: '列表展示' },
    { name: 'icon', label: '图标展示' }
  ]

  sortedIndex = 0

  filteredIndex = 0

  get pageData () {
    return this.getPageData()
  }

  get all () {
    return this.data.rows.length > 0 && !this.data.rows.some(v => !v.checked)
  }

  set all (value: boolean) {
    this.data.rows.forEach(v => {
      v.checked = value
    })
  }

  get none () {
    return this.data.rows.length < 1 || !this.data.rows.some(v => v.checked)
  }

  get checkedNum () {
    return this.checkedRows.length
  }

  get checkedRows () {
    return this.data.rows.filter(v => v.checked)
  }

  get canMove () {
    return this.hasPerm('move', this.checkedRows) && !this.checkedRows.some(v => !!v.teamDir)
  }

  get canDelete () {
    return this.hasPerm('delete', this.checkedRows) && !this.checkedRows.some(v => !!v.teamDir)
  }

  @Emit('update:left-expand') updateLeftExpand (expand: boolean) {}

  @Emit('update:right-expand') updateRightExpand (expand: boolean) {}

  hasPerm (name: PermissionName, rows?: any[]) {
    if (!rows) rows = [this.current]
    return hasPerm(name, ...rows)
  }

  sortSelectedCls (row: any, i: number) {
    const selected = row.prop === this.sorter?.prop && row.order === this.sorter?.order
    if (selected) this.sortedIndex = i
    return selected ? 'selected' : ''
  }

  filterSelectedCls (row: any, i: number) {
    let selected
    if (!row.name) {
      selected = !this.filterData.some(v => this.pageData.params[v.name] === v.value)
    } else {
      selected = this.pageData.params[row.name] === row.value
    }
    if (selected) this.filteredIndex = i
    return selected ? 'selected' : ''
  }

  onSearch (value: string) {
    if (!value || !value.trim()) {
      this.filterDoc('', '')
    } else {
      this.filterDoc('nameOrTag', value.trim())
    }
  }

  listSelectedCls (row: any, i: number) {
    const selected = row.name === this.list
    return selected ? 'selected' : ''
  }

  onUpload (params: { webkitdirectory: boolean; directory: boolean; multiple: boolean }) {
    // if (params.directory) {
    //   this.$message.warning('该功能正在开发中')
    //   return
    // }
    this.uploadDoc(params)
  }

  onSort (row: any) {
    this.sorter = { prop: row.prop, order: row.order }
    this.sortDoc(row.prop, row.order)
  }

  onList (row: any) {
    this.list = row.name
    this.listDoc(row.name)
  }

  $style!: any
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 100%;
  display: flex;
  align-items: center;
}

.breadcrumb {
  flex: 1 1 auto;
}

.search {
  margin: 0 20px;
}

.actions {
  flex: 0 0 auto;
}
</style>
